<template>
    <base-table title="SKU预览" :scroll="{ y: 450 }" size="small" :data-source="skuData" :columns="columns">
        <template #toolbar>
            <a-row type="flex">
                <a-col>
                    <notice />
                </a-col>
                <a-col flex="1">
                </a-col>
            </a-row>
        </template>
        <template #skuInfoSlot="record">
            <img :src="`${record.image}_sum.jpg`" style="height: 40px;max-width: 100%;" />
            <span v-for="item in record.skuVal" :key="item">{{ item.value }};</span>
        </template>
        <!-- <template #skuOnlySlot="{ column, record, index }"> -->
        <!-- <template #skuOnlySlot="record"> -->
            <!-- <div>插槽</div> -->
             <!-- {{ record }} -->
            <!-- <span>{{ a(record) }}</span>0 -->
        <!-- </template> -->
    </base-table>
</template>
<script setup lang="ts">
import Notice from '~/contentScripts/views/tao/detail/components/notice.vue';

import { defineProps } from 'vue';

// interface skuTypeList {
//     SKUID: string | number,
//     image: string,
//     pid: Array<object>,
//     vid: Array<object>,
//     price: string | number,
//     query: string | number,
// }

interface SkuVal {
    key: string;
    value: string;
}

interface Item {
    skuVal: SkuVal[];
}

interface Props {
    skuData: Item[];
}


const props = defineProps({
    skuData: {
        type: Array,
        required: true,
        default: () => []
    },
});

const columns = [
    {
        dataIndex: 'skuInfoSlot',
        title: 'SKU信息',
        width: 260,
        align: 'center',
        // sorter: (a: skuTypeList, b: skuTypeList) => parseInt(a.skuInfoSlot) - parseInt(b.skuInfoSlot),
        dataType: 'custom',
        slot: 'skuInfoSlot',
    },
    {
        dataIndex: 'SKUID',
        title: 'SKUID',
        align: 'center',
    },
    {
        dataIndex: 'price',
        title: '价格',
        align: 'center',
        // fixed: 'left',
    },
    {
        dataIndex: 'query',
        title: '库存',
        align: 'center',
        // fixed: 'left',
    },
];

// let columnTitle = [];

(props as Props).skuData.forEach((item: Item, index) => {
    if (!index) {
        item.skuVal.forEach((itm: SkuVal, idx: number) => {
            columns.push({
                // dataIndex: props.skuData[index].skuVal[idx].value,
                title: itm.key,
                // slot: 'skuOnlySlot',
                // dataType: 'custom',
                align: 'center',
                customRender: (e) => {
                    const text = e.column.title
                    const record = e.record
                    const k = record.skuVal.find(p => p.key == text)
                    return k.value
                }
            });
        })
    }
});



</script>
<style scoped lang="less"></style>